<template>
    <div class="maintenanceRecords">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
            <el-row>
                <el-col :span="24" style="display: flex; ">
                    <span style="font-size: 20px; color: #000; font-weight: bold;">保养记录</span>
                </el-col>
            </el-row>
            <p></p>
            <el-row :gutter="24">
                <el-col :span="4.5">
                    <el-form-item>
                        <el-input prefix-icon="el-icon-search" v-model="dataForm.deviceName" placeholder="设备名称" clearable style="width: 200px;">
                            <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                        <!-- <el-input placeholder="请输入内容" v-model="dataForm.deviceInformation" class="input-with-select" clearable>
                            <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 150px;">
                                <el-option label="设备编号" value="deviceId"></el-option>
                                <el-option label="设备名称" value="deviceName"></el-option>
                                <el-option label="保养人用户名" value="username"></el-option>
                            </el-select>
                            <el-button  icon="el-icon-search"></el-button>
                        </el-input> -->
                    </el-col>
                    <el-form-item>
                        <el-button @click="search()">查询</el-button>
                        <!-- <el-button v-if="isAuth('dss:records:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> -->
                         <el-button v-if="isAuth('dss:records:deleted')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
        <!-- 表字段 -->
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;" :row-class-name="tableRowClassName">
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
            <el-table-column type="index" header-align="center" align="center" label="序号"></el-table-column>
            <el-table-column prop="deviceId" header-align="center" align="center" label="设备编号"></el-table-column>
            <el-table-column prop="deviceName" header-align="center" align="center" label="设备名称"></el-table-column>
            <el-table-column prop="maintenanceTime" header-align="center" align="center" label="保养日期" :formatter="formatDate" sortable></el-table-column>
            <el-table-column prop="username" header-align="center" align="center" label="保养人"></el-table-column>
            <el-table-column  fixed="right"  header-align="center"  align="center"  width="150"  label="操作">
                <template slot-scope="scope">
                    <!-- <el-button v-if="isAuth('dss:records:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.deviceId)">修改</el-button> -->
                    <el-button v-if="isAuth('dss:records:deleted')" type="danger"  @click="deleteHandle(scope.row.id)" class="el-icon-delete" plain></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!-- 新增/修改 弹窗 -->
      <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
    </div>
</template>

<style>
  .el-table .warning-row {
    background: rgb(229, 235, 228);
  }
</style>

<script>
import dayjs from 'dayjs';
// import AddOrUpdate from './maintenanceRecords-add.vue'
export default {
    data(){
        return{
            dataForm:{
                deviceName:'',
                deviceInformation:'',
                deviceId:'',
                deviceName:'',
                username:'',
            },
            pageIndex:1,
            pageSize:10,
            dataListLoading: false, 
            dataList: [], 
            totalPage: 0, 
            dataListSelections:[],
            addOrUpdateVisible:false,
        }
    },
    // components:{
    //     AddOrUpdate
    // },
    activated(){
        this.getDataList()
    },
    
    methods:{

        tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 1) {
          return 'warning-row';
        } 
        return '';
      },
        formatDate(row, column, cellValue) {
            if (cellValue) {
                return dayjs(cellValue).format('YYYY-MM-DD'); // 格式化为年月日
                }
                return '';
            },
            //查询按钮
        search(){
            this.pageIndex = 1
            this.getDataList()
        },
        //获取数据
        getDataList(){
            this.$http({
                url:this.$http.adornUrl('/dss/maintenanceRecords/list'),
                method:'get',
                params: this.$http.adornParams({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                    'deviceName': this.dataForm.deviceName,
                    // 'maintenanceTime':this.maintenanceTime
                    'deviceInformation':this.dataForm.deviceInformation,

                })
            }).then(({data})=>{
                if(data && data.code === 0){
                    // console.log(data)
                    this.dataList = data.page.list
                    // console.log(this.dataList)
                    this.totalPage = data.page.totalCount
                }else{
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })
        },
         //每页数
         sizeChangeHandle(val){
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        //当前页
        currentChangeHandle(val){
            this.pageIndex = val
            this.getDataList()
        },
         //新增
         addOrUpdateHandle (id){
            // console.log(id)
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },
        //多选
        selectionChangeHandle(val){
            this.dataListSelections = val
        },
        //删除
        deleteHandle(id){
            // console.log('1111111111',this.dataListSelections)
            var ids = id ?[id] : this.dataListSelections.map(item =>{
                return item.id
            })
            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(123456)
                this.$http({
                    url:this.$http.adornUrl('/dss/maintenanceRecords/deleted'),
                    method: 'post',
                    data: this.$http.adornData(ids, false)
                }).then(({data}) => {
                    if(data && data.code === 0){
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getDataList()
                            }
                        })
                    }else{
                        this.$message.error(data.msg)
                    }
                })
            })
        }
    }
}
</script>